<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>样式练习</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            .hot{
                background-color: orange;
            }
            .cool{
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root">
            <h1 :class="cname">今天天气很{{weatherText}}</h1>
            <button @click="change">切换天气</button>

            <hr>
            <h1>当前求和为{{sum}}</h1>
            <button @click="sum++">点我</button>
        </div>
    </body>
        <script type="text/javascript">
            Vue.config.productionTip = false
            new Vue({
                el:'#root',
                data:{
                    isHot:true,
                    cname:'hot',
                    sum:0
                },
                computed:{
                    weatherText(){
                        return this.isHot? '炎热':'凉爽'
                    }
                },
                methods: {
                    change(){
                        this.isHot = !this.isHot
                        if(this.isHot) this.cname = 'hot'
                        else this.cname = 'cool'
                    }
                },
            })
        </script>
</html>